<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户列表</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="btnBox">
                <div>
                    <span style="width: 100px;">用户名称：</span>
                    <el-input size="small" v-model="userName" placeholder="请输入用户名称"></el-input>
                </div>
                <div>
                    <span>推广公司：</span>
                    <el-select size="small" filterable v-model="companyId" placeholder="请选择推广公司">
                        <el-option :label="item.companyName" :value="item.companyId"
                            v-for="(item, index) in companyList" :key="index"></el-option>
                    </el-select>
                </div>
                <div>
                    <span style="width: 74px;">注册日期：</span>
                    <el-date-picker v-model="selectData" type="daterange" align="right" unlink-panels size="small"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </div>
                <div>
                    <el-button size="small" icon="el-icon-search" @click="getList('search')">搜索</el-button>
                    <el-button size="small" icon="el-icon-refresh-right" @click="getList('res')">重置</el-button>
                </div>
            </div>
            <el-table :data="tableData" border style="width: 100%" height="626" row-key="value"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column prop="companyName" label="推广公司"></el-table-column>
                <el-table-column prop="promoterName" label="推广员" width="160"></el-table-column>
                <el-table-column prop="userId" label="用户ID" width="100"></el-table-column>
                <el-table-column prop="userName" label="名称" width="160"></el-table-column>
                <el-table-column label="用户身份" width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.userType == 0">普通用户</el-tag>
                        <el-tag v-else-if="scope.row.userType == 1" type="success">会员</el-tag>
                        <el-tag v-else-if="scope.row.userType == 2" type="warning">推广员</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="会员等级" width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.vipLevel == 0">VIP{{ scope.row.vipLevel }}</el-tag>
                        <el-tag v-else type="success">VIP{{ scope.row.vipLevel }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="usedPoints" label="累计消耗积分" width="120"></el-table-column>
                <el-table-column prop="userScore" label="剩余积分" width="100"></el-table-column>
                <el-table-column prop="userBalance" label="账户余额" width="100"></el-table-column>
                <el-table-column prop="diamondNum" label="钻石" width="100"></el-table-column>
                <el-table-column prop="createTime" label="注册时间"></el-table-column>
            </el-table>
            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[50, 100, 200]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
            </div>
        </el-card>

    </div>
</template>

<script>
import { getUserList } from '../../network/user'
import { getCompanyListNoPage } from '../../network/company'

export default {
    data() {
        return {
            tableData: [],
            pageSize: 50,
            pageNum: 1,
            totalNum: 0,
            userName: '',
            selectData: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            companyId: 0,
            companyList: []


        };
    },
    methods: {
        getList(flag) {
            if (flag == 'search') {
                // 获取数据
                console.log(this.userName);
                console.log(this.selectData);

                getUserList({
                    companyId: this.companyId,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    userName: this.userName,
                    startTime: this.selectData[0],
                    endTime: this.selectData[1],
                }).then(res => {
                    if (res.flag) {
                        this.tableData = res.data.list;
                        this.totalNum = res.data.total;
                    }
                })


            } else if (flag == 'res') {
                this.tableData = []
                this.selectData = []
                this.userName = ''
                this.orderNum = ''
                this.account = ''
                this.companyId = 0
                this.$message.success('已重置')
                this.getList('search');
            }
        },


        handleSizeChange(val) {
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        getCompanyList() {
            getCompanyListNoPage().then(res => {
                if (res.flag) {
                    res.data.unshift({
                        companyId: 0,
                        companyName: '全部',
                    })
                    this.companyList = res.data
                }
            })
        },
    },
    created() {
        getUserList({
            companyId: sessionStorage.companyId,
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }).then(res => {
            if (res.flag) {
                this.tableData = res.data.list;
                this.totalNum = res.data.total;
            }
        })

        this.getCompanyList()
    },
    filters: {

    },
};
</script>

<style scoped>
.btnBox>div>span {
    /* width: 100px; */
    display: inline-block;
    font-size: 14px;
}

.nameTip {
    margin-bottom: 16px;
}
</style>